<script lang="ts" setup>
import {ShopClass, ShopType2Instance} from "@/Game/Shop";
import {useAppStore} from "@/stores/app";

const appStore = useAppStore();

const {shop} = defineProps<{
    shop: ShopClass,
    enabled?: boolean
}>();

const linkageBonusShops = shop.LinkageBonusTypes?.map(item => ShopType2Instance[item]) ?? [];
const adjustHeight = shop.LinkageBonus && shop.Description && shop.Description.includes("<br/>");
</script>

<template>
    <v-card :color="shop.Color" :hover="enabled" :link="enabled" :title="shop.Name">
        <template v-slot:prepend>
            <span style="font-size: 1.2rem;">{{shop.Icon}}</span>
        </template>
        <template v-slot:append>{{shop.Price}}🪙</template>
        <v-card-text :style="{height: appStore.wideScreen && adjustHeight ? 'calc(100% - 2.75rem)' : 'calc(100% - 3.25rem)', marginTop: appStore.wideScreen && adjustHeight ? '-0.5rem' : undefined}" style="display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 0.75rem;">
            <div style="font-size: 1.2rem; display: flex; align-items: center;">
                <div style="font-size: 0.875rem; min-width: 2.2rem;">收入:</div>
                <div v-if="shop.DirectIncome">
                    <template v-for="item in shop.DirectIncome" :key="item">🪙</template>
                </div>
                <div v-else-if="shop.RandomIncome">🎲</div>
                <div v-else-if="shop.ConsumptionBonus">
                    <template v-for="item in new Array(shop.ConsumptionBonus)" :key="item">🃏</template>
                </div>
                <div v-else-if="shop.IncomeFromConsumption">🎴🪙</div>
                <div v-else-if="shop.IncomeFromShopCount">🏠</div>
                <v-tooltip activator="parent" location="bottom start">
                    <div style="max-width: 16.4rem; line-height: 1;">{{shop.GetIncomeDescription()}}</div>
                </v-tooltip>
            </div>
            <div v-if="shop.Description && appStore.wideScreen" :style="{fontSize: adjustHeight ? '0.75rem': undefined}" v-html="shop.Description"/>
            <template v-if="shop.LinkageBonus">
                <div v-if="appStore.wideScreen" style="display: flex; gap: 0.5rem; align-items: center; width: fit-content;">
                    <v-avatar v-for="item in linkageBonusShops" :color="item.Color" size="38" style="font-size: 1.2rem;">
                        {{item.Icon}}
                    </v-avatar>
                    <v-chip color="white" rounded size="large" style="font-size: 1.2rem;">
                        <span style="margin-inline-start: -6px;">+</span> <span style="margin-inline-end: -6px;"><template v-for="item in shop.LinkageBonus" :key="item">🪙</template></span>
                    </v-chip>
                    <v-tooltip activator="parent" location="bottom start">
                        <div style="max-width: 16.4rem;">{{shop.GetLinkageDescription()}}</div>
                    </v-tooltip>
                </div>
                <div v-else style="font-size: 1.2rem; display: flex; align-items: center;">
                    <span style="font-size: 0.875rem; min-width: 2.2rem;">联动: </span>
                    <template v-for="item in linkageBonusShops">{{item.Icon}}</template>
                    <span style="font-size: 0.875rem;"> + </span>
                    <template v-for="item in shop.LinkageBonus" :key="item">🪙</template>
                </div>
            </template>
        </v-card-text>
    </v-card>
</template>